import React from 'react'
import {Image, Text, View} from "react-native";
import WingBlank from "@ant-design/react-native/es/wing-blank/index";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";
import Card from "@ant-design/react-native/es/card/index";
import Styles from '../common/styles'
import Tag from "@ant-design/react-native/es/tag/index";
import ListView from "@ant-design/react-native/es/list-view/index";
import {Actions} from 'react-native-router-flux'
import Button from "@ant-design/react-native/es/button/index";
import Flex from "@ant-design/react-native/es/flex/Flex";

const orderData = [
  {
    carName: '重型吊车',
    carYear: 5,
    driver: '张三',
    driverYear: 3,
    carImage: 'https://org.modao.cc/uploads4/images/3133/31336283/v2_pnxd2q.png'
  }, {
    carName: '重型吊车',
    carYear: 5,
    driver: '张三',
    driverYear: 3,
    carImage: 'https://org.modao.cc/uploads4/images/3133/31336283/v2_pnxd2q.png'
  }, {
    carName: '重型吊车',
    carYear: 5,
    driver: '张三',
    driverYear: 3,
    carImage: 'https://org.modao.cc/uploads4/images/3133/31336283/v2_pnxd2q.png'
  }, {
    carName: '重型吊车',
    carYear: 5,
    driver: '张三',
    driverYear: 3,
    carImage: 'https://org.modao.cc/uploads4/images/3133/31336283/v2_pnxd2q.png'
  },
]


export default class CarList extends React.Component {
  state = {
    value: ''
  }
  onFetch = async (
    page = 1,
    startFetch,
    abortFetch
  ) => {
    try {
      let pageLimit = 30;
      startFetch(orderData, pageLimit);
    } catch (err) {
      abortFetch(); //manually stop the refresh or pagination if it encounters network error
    }
  };
  renderItem = (data) => {
    return <View>
      <WhiteSpace size='lg'/>
      <Card>
        <Card.Header
          title={<Flex direction={'row'} justify={'space-between'}>
            <Text style={Styles.defaultFontSize}>
              {data.carName}</Text>
            <Text style={Styles.defaultFontSize}>
              车辆年限：{data.carYear} 年</Text>
          </Flex>
          }
        />
        <Card.Body>
          <View style={{flexDirection: 'column', paddingHorizontal: 15}}>
            <View style={{flexDirection: 'row'}}>
              <Image source={{uri: 'https://org.modao.cc/uploads4/images/3133/31336283/v2_pnxd2q.png'}}
                     style={{width: 80, height: 80}}/>
              <View style={{
                flexDirection: 'column', justifyContent: 'center',
                marginLeft: 30
              }}>
                <Text>司机-{data.driver}</Text>
                <Text>驾龄 {data.driverYear} 年</Text>
              </View>
            </View>
          </View>
        </Card.Body>
        <Card.Footer
          content={
            <View style={{
              borderTopWidth: 1, borderTopColor: '#ececec'
            }}>
              <WhiteSpace/>
              <View style={{flexDirection: 'row', justifyContent: 'flex-end',}}>
                <WingBlank>
                  <Button type={'ghost'} size={'small'}>编辑</Button>
                </WingBlank>
                <Button type={'warning'} size={'small'}>删除</Button>
              </View>
            </View>
          }
        />
      </Card>

    </View>
  }

  render() {
    return <View>
      <WingBlank size="lg">
        <ListView
          onFetch={this.onFetch}
          renderItem={this.renderItem}
          numColumns={1}
        />
        <WhiteSpace/>

      </WingBlank>

    </View>
  }
}